<script lang="ts" setup>
import { ref,h } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { detailApi, editApi } from '#/api/system/setting';

const key = ref('');

const [Form, formApi] = useVbenForm({
  schema: [
   {
      fieldName: 'registerMethod',
      label: '登录/注册方式',
      component: 'RadioGroup',
      labelWidth: 130,
      defaultValue: 20,
      componentProps: {
        options: [
          { label: '手机号 + 短信验证码', value: 10 },
          { label: '手机号 + 密码', value: 20 },
        ],
      },
      rules: 'required',
    },
    {
      component: 'Divider',
      fieldName: '',
      hideLabel: true,
      renderComponentContent: () => {
        return {
          default: () => h('div', '微信小程序授权登录'),
        };
      },
    },
    {
      fieldName: 'isOauthMpweixin',
      label: '一键授权登录/注册',
      component: 'Switch',
      labelWidth: 160,
      defaultValue: 1,
      componentProps: {
        class: 'w-auto',
        checkedChildren: '开启',
        checkedValue: 1,
        unCheckedChildren: '关闭',
        unCheckedValue: 0,
      },
      formItemClass: 'items-start',
      wrapperClass: 'flex-wrap',
      description: '开启后在微信小程序端一键获取用户授权并登录和注册（请先配置微信小程序设置）',
      rules: 'required',
    },
    {
      fieldName: 'isPersonalMpweixin',
      label: '填写微信头像和昵称',
      component: 'Switch',
      labelWidth: 160,
      defaultValue: 1,
      componentProps: {
        class: 'w-auto',
        checkedChildren: '开启',
        checkedValue: 1,
        unCheckedChildren: '关闭',
        unCheckedValue: 0,
      },
      formItemClass: 'items-start',
      wrapperClass: 'flex-wrap',
      description: '开启后在微信小程序端一键授权注册时要求用户填写微信头像和昵称，仅首次注册时弹出',
      rules: 'required',
    },
    {
      fieldName: 'isOauthMobileMpweixin',
      label: '一键获取微信手机号',
      component: 'Switch',
      labelWidth: 160,
      defaultValue: 1,
      componentProps: {
        class: 'w-auto',
        checkedChildren: '开启',
        checkedValue: 1,
        unCheckedChildren: '关闭',
        unCheckedValue: 0,
      },
      formItemClass: 'items-start',
      wrapperClass: 'flex-wrap',
      description: () => ['开启后在微信小程序端授权获取微信用户的手机号并登录和注册（请先配置微信小程序设置）','微信官方于2023年8月26日起对该接口功能收费，每次成功调用收费0.03元'].map((v) => h('p', v)),
      rules: 'required',
    },
  ],
  showDefaultActions: false,
});

const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) return;
    const values = await formApi.getValues();
    drawerApi.lock();
    editApi(key.value, values)
      .then((res) => {
        message.success({
          content: res.message,
        });
        drawerApi.close();
      })
      .catch(() => {
        drawerApi.unlock();
      });
  },
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = drawerApi.getData();
      formApi.resetForm();
      if (data.key) {
        key.value = data.key;
        drawerApi.setState({ title: data.describe })
        detailApi(data.key).then((res) => {
          formApi.setValues(res.values);
        })
      }
    }
  },
  overlayBlur: 1,
  title: '',
//   class: 'w-[380px]',
});
</script>
<template>
  <Drawer>
    <Form />
  </Drawer>
</template>
